<template>
  <div class="echarts">
    <div ref="myChart" id="myChart" :style="{width:'100%',height:'7rem'}"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import axios from "axios";
import { option } from "@/common/option.js";
export default {
  inject: ['reload'],
  data() {
    return {
      tbabData: {}
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //这个方法的作用是将图表宽高写死，解决图表只有100px的问题
    //获取数据
    getData() {
      axios
        .get(
          "https://easy-mock.com/mock/5c10e14fbe3cc90fa1b1706a/boke/api/leidatu"
        )
        .then(response => {
          this.tbabData = response.data.data;
          this.leidatu();
        })
        .catch(error => {
          console.log(error);
        });
    },
    leidatu() {
      var self = this;
      var myChart = echarts.init(document.getElementById("myChart"));
      myChart.setOption(option, true);
      window.onresize = function() {
        myChart.resize();
        self.refresh();
      }
    },
    refresh() {
      this.reload();
    }
  }
};
</script>
<style scoped>
</style>

